import './ShopBar.scss';

import React from 'react';

import { connect } from 'react-redux'

import { showChoose, addSelectItem, minusSelectItem, clearCar } from '../../actions/menuAction'

class ShopBar extends React.Component {

    getTotalPrice() {
        let listData = this.props.listData.food_spu_tags || [];
        let totalPrice = 0;
        let dotNum = 0;
        let chooseList = [];

        for (let i = 0; i < listData.length; i++) {
            let spus = listData[i].spus || []
            for (let j = 0; j < spus.length; j++) {
                let chooseCount = spus[j].chooseCount;
                if (chooseCount > 0) {
                    dotNum += chooseCount
                    spus[j]._index = j;
                    spus[j]._outIdex = i
                    chooseList.push(spus[j])
                    totalPrice += spus[j].min_price * chooseCount
                }
            }
        }

        return {
            dotNum,
            totalPrice,
            chooseList
        }
    }

    addSelectItem(item) {
        this.props.dispatch(addSelectItem({
            index: item._index,
            _outIdex: item._outIdex
        }))
    }

    minusSelectItem(item) {
        this.props.dispatch(minusSelectItem({
            index: item._index,
            _outIdex: item._outIdex
        }))
    }

    renderChooseItem(data) {
        console.log(data)
        let array = data.chooseList || [];
        return array.map((item, index) => {
            return (
                <div className="chooseItem" key={index}>
                    <div className="item-name">{item.name}</div>
                    <div className="price">￥{item.min_price * item.chooseCount}</div>
                    <div className="select-content">
                        <div className="minus" onClick={() => this.minusSelectItem(item)}></div>
                        <div className="count" >{item.chooseCount}</div>
                        <div className="plus" onClick={() => this.addSelectItem(item)}></div>
                    </div>
                </div>
            )
        })
    }
    openChooseContent() {
        let flag = this.props.showChooseContent;
        this.props.dispatch(showChoose({
            flag: !flag
        }))
    }
    clearCar() {
        this.props.dispatch(clearCar())
        this.props.dispatch(showChoose({
            flag: false
        }))
    }

    render() {
        let shiping_fee = this.props.listData.poi_info ? this.props.listData.poi_info.shipping_fee : 0
        let data = this.getTotalPrice()

        return (
            <div className="shop-bar">
                {
                    this.props.showChooseContent ?
                        <div className="choose-content">
                            <div className="content-top">
                                <div className="clear-car" onClick={() => this.clearCar()}>清空购物车</div>
                            </div>
                            {this.renderChooseItem(data)}
                        </div> : null
                }
                <div className="bottom-content">
                    <div className="shop-icon" onClick={() => this.openChooseContent()}>
                        {data.dotNum > 0 ? <div className="dot-num">{data.dotNum}</div> : null}
                    </div>
                    <div className="price-content">
                        <p className="total-price">￥{data.totalPrice}</p>
                        <p className="other-price">另需配送费&nbsp;￥{shiping_fee}</p>
                    </div>
                    <div className="submit-btn">去结算</div>
                </div>
            </div>
        )
    }
}
export default connect((state) => ({
    listData: state.menuReducer.listData,
    showChooseContent: state.menuReducer.showChooseContent
}))(ShopBar)
